<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>各种滤镜效果</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        div{
            width:300px;
            display: inline-block;
            text-align: center;
            margin: 5px;
            margin-top: 20px;
        }
        div div{
            margin-top: 5px;
            font-weight: bold;
            font-family: 微软雅黑;
            font-size: 1.2rem;
            color: #333;
        }
        img{
            border:1px solid gray;
            padding:3px;
            width:100%;
        }
        section div:nth-of-type(2) img{
            filter: grayscale(50%);
        }
        section div:nth-of-type(3) img{
            filter: grayscale(100%);
        }
        section div:nth-of-type(4) img{
            filter: sepia(100%);
        }
        section div:nth-of-type(5) img{
            filter: saturate(300%);
        }
        section div:nth-of-type(6) img{
            filter: hue-rotate(90deg);
        }
        section div:nth-of-type(7) img{
            filter: hue-rotate(180deg);
        }
        section div:nth-of-type(8) img{
            filter: hue-rotate(270deg);
        }
        section div:nth-of-type(9) img{
            filter: invert(90%);
        }
        section div:nth-of-type(10) img{/*opacity滤镜比之opacity属性，有可能通过硬件加速来提高页面性能*/
            filter: opacity(50%);
        }
        section div:nth-of-type(11) img{
            filter: contrast(150%);
        }
        section div:nth-of-type(12) img{
            filter: blur(3px);
        }
        section div:nth-of-type(13) div{
        }
        section div:nth-of-type(13) img{
            border:none;
            filter: drop-shadow(-5px -5px 8px #725a00);
        }
    </style>
</head>
<body>
<hr>
<h3>各种滤镜效果</h3>
<section>
    <div>
        <img src="../08layout/tengWangGe.jpg" alt="原始图片效果">
        <div>原始图片效果</div>
    </div>
    <div>
        <img src="../08layout/tengWangGe.jpg" alt="grayscale灰度50%">
        <div>grayscale灰度50%</div>
    </div>
    <div>
        <img src="../08layout/tengWangGe.jpg" alt="grayscale灰度100%">
        <div>grayscale灰度100%</div>
    </div>
    <div>
        <img src="../08layout/tengWangGe.jpg" alt="sepia褐色100%">
        <div>sepia褐色100%</div>
    </div>
    <div>
        <img src="../08layout/tengWangGe.jpg" alt="saturate饱和度300%">
        <div>saturate饱和度300%</div>
    </div>
    <div>
        <img src="../08layout/tengWangGe.jpg" alt="hue-rotate色环90度%">
        <div>hue-rotate色环90度</div>
    </div>
    <div>
        <img src="../08layout/tengWangGe.jpg" alt="hue-rotate色环180度%">
        <div>hue-rotate色环180度</div>
    </div>
    <div>
        <img src="../08layout/tengWangGe.jpg" alt="hue-rotate色环270度%">
        <div>hue-rotate色环270度</div>
    </div>
    <div>
        <img src="../08layout/tengWangGe.jpg" alt="hue-invert翻转90%">
        <div>invert翻转90%</div>
    </div>
    <div>
        <img src="../08layout/tengWangGe.jpg" alt="opacity透明度50%">
        <div>opacity透明度50%</div>
    </div>
    <div>
        <img src="../08layout/tengWangGe.jpg" alt="contrast对比度150%">
        <div>contrast对比度150%</div>
    </div>
    <div>
        <img src="../08layout/tengWangGe.jpg" alt="blur模糊3px">
        <div>blur模糊3px</div>
    </div>
    <div>
        <img src="../08layout/tengWangGe.jpg" alt="drop-shadow阴影(-5px -5px 8px #725a00)">
        <div>drop-shadow阴影(-5px -5px 8px #725a00)</div>
    </div>
</section>

</body>
</html>


